<template>
  <div class="grzx-container">
    <!-- 标题 -->
    <div class="navbar" :style="{ marginTop: statusBarHeight + 'px' }">
      <van-image
        width="20px"
        height="20px"
        fit="contain"
        :src="require('../../assets/ic_arrow_left_black.png')"
        @click="goBack" />
      <span class="navbar-title">个人中心</span>
      <span class="navbar-right-text"></span>
    </div>
    <div class="user-box">
      <van-image width="60px" height="60px" fit="contain" :src="require('../../assets/ic_user_avatar.png')" />
      <div class="user-info">
        <div class="user-info-name-role">
          <span class="user-info-name">{{ userInfo?.username }}</span>
          <span class="user-info-role">{{ getRoleText() }}</span>
        </div>
        <span class="user-info-unit">单位：{{ userInfo?.departmentname }}</span>
        <span class="user-info-phone">手机：{{ userInfo?.phone }}</span>
      </div>
    </div>
    <van-cell class="version-info" title="版本信息" is-link @click="toVsersionInfo" />
    <van-cell class="suggestion" title="投诉建议" is-link @click="toSuggestion" />
    <span class="login-out" @click="loginOut">退出登录</span>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      statusBarHeight: 24,
      userInfo: {}
    }
  },
  computed: {
    ...mapGetters(['getNativeApi', 'getNativeCallJs', 'getUserInfo'])
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.getNativeCallJs.registerNativieGoBack(() => {
        vm.goBack()
      })
    })
  },
  created() {
    this.getNativeApi.setStatusBarColor('#FFFFFF')
    this.getNativeApi.setStatusBarLightMode(true)
    this.getNativeApi.getStatusBarHeight().then(result => {
      this.statusBarHeight = result.data
    })
    this.userInfo = this.getUserInfo.user
  },
  methods: {
    getRoleText() {
      let roleText = '普通用户'
      switch (this.userInfo.role) {
        case '1':
          roleText = '管理员'
          break
        case '2':
          roleText = '普通用户'
          break
      }
      return roleText
    },
    toVsersionInfo() {
      this.$router.push('/versioninfo')
    },
    toSuggestion() {
      this.$router.push('/suggestion')
    },
    loginOut() {
      this.$store.dispatch('user/setTokenAction', '')
      localStorage.setItem('pwd', '')
      this.$router.replace('/')
    },
    goBack() {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
.grzx-container {
  width: 100vw;
  height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
}
.navbar {
  width: calc(100vw - 24px);
  height: 44px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #ffffff;
  padding: 0 12px;
}
.navbar-title {
  font-weight: 800;
  font-size: 18px;
  color: #000000;
}
.navbar-right-text {
  font-size: 14px;
  color: #ffffff;
}
.user-box {
  padding: 25px 20px;
  display: flex;
  align-items: center;
  background-color: #ffffff;
  margin-top: 12px;
}
.user-info {
  display: flex;
  flex-direction: column;
  margin-left: 16px;
}
.user-info-line-one {
  display: flex;
  align-items: center;
}
.user-info-name {
  font-weight: 800;
  font-size: 18px;
  color: #333333;
}
.user-info-role {
  background: rgba(0, 127, 253, 0.1);
  border-radius: 14px;
  padding: 4px 15px;
  font-size: 14px;
  color: #007ffd;
  margin-left: 12px;
}
.user-info-unit {
  font-size: 14px;
  color: #333333;
  margin-top: 6px;
}
.user-info-phone {
  font-size: 14px;
  color: #333333;
  margin-top: 6px;
}
.version-info {
  font-size: 15px;
  color: #333333;
  margin-top: 12px;
}
.suggestion {
  font-size: 15px;
  color: #333333;
}
.login-out {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 30px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: #ffffff;
  font-size: 15px;
  color: #007ffd;
}
</style>
